<html>
    <head>
        <style>
            img { display: block; border-style: groove}
        </style>
        <script>
            function testImageData() {
                var obj = myWidget.image;
                var pxm = myWidget.pixmap;

                function compareImageDataSize(o, imageData) {
                    myWidget.compare(imageData.height, o.height);
                    myWidget.compare(imageData.width, o.width);
                }
                compareImageDataSize(obj, obj.toImageData());
                compareImageDataSize(pxm, pxm.toImageData());

                function compareImageDataPixel(o, imageData) {
                    compareImageDataSize(o, imageData);
                    // Make sure pixels are 0xAABBCCFF
                    var data = imageData.data;
                    for (var i = 0; i < data.length; i += 4) {
                        myWidget.compare(data[i], 0xaa); // R
                        myWidget.compare(data[i+1], 0xbb); // G
                        myWidget.compare(data[i+2], 0xcc); // B
                        myWidget.compare(data[i+3], 0xff); // A
                    }
                }
                var objARGB32 = myWidget.abcImage(5);
                compareImageDataPixel(objARGB32, objARGB32.toImageData());
                var objRGB32 = myWidget.abcImage(4);
                compareImageDataPixel(objRGB32, objRGB32.toImageData());
                var objRGB888 = myWidget.abcImage(13);
                compareImageDataPixel(objRGB888, objRGB888.toImageData());
                var objRGB444 = myWidget.abcImage(14);
                compareImageDataPixel(objRGB444, objRGB444.toImageData());
            }

            function startTest()
            {
                testImageData();

                var obj = myWidget.image;
                var pxm = myWidget.pixmap;

                var img = new Image;
                obj.assignToHTMLImageElement(img);
                var img1 = document.getElementById("img1");
                var img2 = document.getElementById("img2");
                var img3 = document.getElementById("img3");
                var img4 = document.getElementById("img4");
                document.body.appendChild(img);
                obj.assignToHTMLImageElement(img3);
                pxm.assignToHTMLImageElement(img4);
                myWidget.compare(pxm.width, img4.width);
                myWidget.compare(obj.width, img3.width);
                var signalsFired = 0;
                myWidget.compare(obj.toString(),"[Qt Native Pixmap "+obj.width+","+obj.height+"]");
                myWidget.compare(String(pxm),"[Qt Native Pixmap "+pxm.width+","+pxm.height+"]");

                // this shouldn't work but shouldn't crash
                myWidget.randomSlot("foobar");

                myWidget.pixmapSignal.connect(function(imgFromSignal) {
                    myWidget.compare(imgFromSignal.height, img2.height);
                    if (++signalsFired == 2)
                        myWidget.completeTest();
                });

                myWidget.imageSignal.connect(function(imgFromSignal) {
                    myWidget.compare(pxm.height, img2.height);
                    if (++signalsFired == 2)
                        myWidget.completeTest();
                });

                function continueTestAfterImagesAreLoaded()
                {
                    if (img1.complete && img2.complete) {
                        myWidget.compare(pxm.height, img2.height);
                        myWidget.pixmapSlot(img);
                        myWidget.imageSlot(pxm);
                    }
                }
                img1.onload = continueTestAfterImagesAreLoaded;
                img2.onload = continueTestAfterImagesAreLoaded;
                img1.src = obj.toDataUrl();
                img2.src = myWidget.pixmap.toDataUrl();
                myWidget.image = pxm;
                myWidget.pixmap = img;
            }
        </script>
    </head>
    <body onload="startTest()">
        <img id="img1" />
        <img id="img2" />
        <img id="img3" />
        <img id="img4" />
    </body>
</html>
